<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0px;
				margin: 0px;
			}
			body{
				background:url('首页/img/办公室背景.png') no-repeat;
				background-size:100% 100%;
				overflow: hidden;
				background-attachment: fixed;
			}
			.beipainfang{
				height: 370px;
				position: absolute;
				padding-left: 460px;
				padding-top: 300px;
			}
			.maopao{
				width: 350px;
				padding-left: 700px;
				padding-top: 80px;
				display: none;
			}
			.qingxuanze{
				position: fixed;
				left: 400px;
				top:-200px;
				display: none;
			}
			.container{
			    width:400px;
			    height:auto;
				position:fixed;
				left: 460px;
				top: 200px;
				display: none;
			}
			.container .img-box{
			    overflow:hidden;
			    position: relative;
			    width:80px;
			    height:80px;
			    display: inline-block;
			    cursor:pointer;
			    margin-left: 85px;
			}
			.container img{
			    position: absolute;
			    top:0;
			    left:0;
			    width:80px;
			    transition:all .5s;
			}        
			.container .overlay{
			    position: absolute;
			    width:85px;
				height: 85px;
			    top:0;
			    left:0;
			    z-index:2;
			    line-height:135px;
			    text-align: center;
			    background-color: rgba(0,0,0,.5);
			    opacity: 0;
			}
			.container .title{
			    color:#fff;
			}
			.img-box:hover img{
			    transform:scale(1.2);
			}
			.img-box:hover .overlay{
			    opacity: 1;
			}
			.again{
				width:180px;
				height: 180px;
				overflow: hidden;
				position:fixed;
				left: 360px;
				top: 150px;
				cursor:pointer;
				display: none;
			}
			.again img{
				position: absolute;
				top:0;
				left:0;
				width:180px;
				transition:all .5s;
			}
			.again .tixing{
				color:#fff;
			}
			.again .ts{
				position: absolute;
				width:180px;
				height:180px;
				top:0;
				left:0;
				z-index:2;
				line-height:135px;
				text-align: center;
				background-color: rgba(0,0,0,.5);
				opacity: 0;
				overflow: hidden;
			}
			.again:hover .ts{
				opacity: 1;
			}
			.again:hover img{
			    transform:scale(1.2);
			}
			.content{
				width:600px;
				height: 200px;
				position:fixed;
				left: 450px;
				top: 200px;
				display: none;
				color: red;
				overflow: hidden;
				background-color: rgb(128,128,128,0.9);
				border-radius: 15%;
			}
			.content .img-box{
				overflow:hidden;
				position: relative;
				width:110px;
				height:110px;
				display: inline-block;
				cursor:pointer;
				margin-left: 70px;
				margin-top: 35px;
			}
			.content img{
				position: absolute;
				top:0;
				left:0;
				width:110px;
				height: 110px;
				transition:all .5s;
			}
			.content .overlay{
				position: absolute;
				width:110px;
				height: 110px;
				top:0;
				left:0;
				z-index:9;
				line-height:135px;
				text-align: center;
				background-color: rgba(0,0,0,.5);
				opacity: 0;
			}
			.content .title{
			    color:#fff;
			}
			.img-box:hover img{
			    transform:scale(1.2);
			}
			.img-box:hover .overlay{
			    opacity: 1;
			}
			.xts{
				position: fixed;
				width: 1000px;
				height: 650px;
				overflow: hidden;
				left: 300px;
				top: 50px;
				z-index: 100;
				display: none;
			}
			.xts .xt{
				position: absolute;
				left: 0px;
				top: 0px;
				width: 1000px;
				height: 650px;
				z-index: 101;
			}
			.cha{
				position: absolute;
				z-index: 102;
				width: 80px;
				height: 80px;
				left: 0px;
			}
			.hongse{
				position:absolute;
				width:80px;
				height: 80px;
				top:0px;
				left:0px;
				z-index:103;
				background-color: rgba(255,0,0,.5);
				opacity: 0;
			}
			.cc:hover .hongse{
				opacity: 1;
			}
			.cc{
				position: fixed;
				z-index: 102;
				width: 80px;
				height: 80px;
				left: 1220px;
				top: 50px;
				cursor:pointer;
			}
		</style>
	</head>
	<body>
		<!-- 人物 -->
		<img src="首页/img/R1.png" alt="" class="beipainfang" id='renwu'>
		<!-- 冒泡框 -->
		<img src="首页/img/2.png" alt="" class="maopao" id='maopao'>
		<!-- 请选择 -->
		<img src="首页/img/选择.gif" alt="" id="qingxuanze" class="qingxuanze">
		<!-- 选择界面 -->
		<div class="container" id="xz">
		    <div class="img-box" id="xuanze1">            
		        <img src="首页/img/观望聊天群.png" id="x1">
		        <div class="overlay">
		            <div class="title" id='wb1'>观望聊天群</div>
		        </div>
		    </div>
		    <div class="img-box" id="xuanze2">            
		        <img src="首页/img/删除聊天群.png" id="x2">
		        <div class="overlay">
		            <div class="title" id='wb2'>删除聊天群</div>
		        </div>
		    </div>
		</div>
		<!-- 最后页面 -->
		<div id="zuihou" class="content">
			<div id="xiajie" class="img-box">
				<img src="首页/img/下阶段.png" alt="" id="xiajieduan">
				<div class="overlay">
				    <div class="title" id='xuan1'>下阶段</div>
				</div>
			</div>
			<div id="xiaotiesi" class="img-box">
				<img src="首页/img/小贴士.png" alt="" id="xiaotiesi">
				<div class="overlay">
					<div class="title" id="xuan2">小贴士</div>
				</div>
			</div>
			<div id="xiaoyouxi" class="img-box">
				<img src="首页/img/小游戏.png" alt="" id="xiaoyouxi">
				<div class="overlay">
					<div class="title" id="xuan3">小游戏</div>
				</div>
			</div>
		</div>
		<!-- 再来一次 -->
		<div class="again" id="again">
			<img src="首页/img/再来一次.png" alt="">
			<div class="ts">
				<div class="tixing">不会吧这都输，再来一次吧</div>
			</div>
		</div>
		<!-- 小贴士 -->
		<div class="xts" id="xts">
			<img src="首页/img/投资诈骗提醒.png" alt="" id="xt">
			<div class="cc" id="cc">
				<img src="首页/img/叉.png" alt="" id="cha" class="cha">
				<div class="hongse"></div>
			</div>	
		</div>
		<script src="首页/jswj/jquery-2.2.4.js"></script>
		<script>
			$(function(){
				key=0;
				window.onclick=function(){
					if(key==0){
						document.getElementById('maopao').style.display='block';
						key++;
					}else if(key==1){
						document.getElementById('renwu').src='首页/img/R4.png';
						key++;
					}else if(key==2){
						document.getElementById('maopao').style.display='none';
						key++;
					}else if(key==3){
						document.getElementById('xz').style.display='block';
						document.getElementById('qingxuanze').style.display='block'
						key++;
					}else if(key==5){
						document.getElementById('maopao').style.display='none'
						key++;
					}else if(key==6){
						document.getElementById('qingxuanze').style.display='block'
						document.getElementById('maopao').style.display='none'
						document.getElementById('x1').src='首页/img/手机.png'
						document.getElementById('x2').src='首页/img/看书.png'
						document.getElementById('wb1').innerHTML='手机'
						document.getElementById('wb2').innerHTML='书店'
						setTimeout(function() {
							document.getElementById('xz').style.display='block'
						}, 1000)
						key++
					}else if(key==8){
						key++;
					}else if(key==9){
						document.getElementById('maopao').style.display='none'
						document.getElementById('qingxuanze').style.display='block';
						document.getElementById('renwu').src='首页/img/R4.png';
						document.getElementById('x1').src='首页/img/网络搜索投资.png'
						document.getElementById('x2').src='首页/img/正规投资软件.png'
						document.getElementById('wb1').innerHTML='去网上找投资链接'
						document.getElementById('wb2').innerHTML='去官网找链接'
						setTimeout(function() {
							document.getElementById('xz').style.display='block'
						}, 1000)
						key++
					}else if(key==11){
						key++
					}else if(key==12){
						document.getElementById('qingxuanze').style.display='block'
						document.getElementById('maopao').style.display='none'
						document.getElementById('x1').src='首页/img/手机.png'
						document.getElementById('x2').src='首页/img/atm机.png'
						document.getElementById('wb1').innerHTML='手机'
						document.getElementById('wb2').innerHTML='atm机'
						setTimeout(function() {
							document.getElementById('xz').style.display='block'
							document.getElementById('renwu').src='首页/img/R4.png';
						}, 1000)
						key++
					}else if(key==14){
						key++;
					}else if(key==15){
						document.getElementById('qingxuanze').style.display='block'
						document.getElementById('maopao').style.display='none'
						document.getElementById('x1').src='首页/img/手机.png'
						document.getElementById('x2').src='首页/img/去银行.png'
						document.getElementById('wb1').innerHTML='手机'
						document.getElementById('wb2').innerHTML='银行柜台'
						setTimeout(function() {
							document.getElementById('xz').style.display='block'
							document.getElementById('renwu').src='首页/img/R4.png';
						}, 1000)
						key++
					}
				}
				document.getElementById('xuanze1').onclick=function(){
					if(key==4){
						document.getElementById('xz').style.display='none';
						document.getElementById('qingxuanze').style.display='none';
						document.getElementById('maopao').src='首页/img/3.1.png'
						setTimeout(function() {
							document.getElementById('maopao').style.display='block'
						}, 1000)
						setTimeout(function() {
							document.getElementById('again').style.display='block'
						}, 1500)
						key++;
					}else if(key==7){
						document.getElementById('xz').style.display='none';
						document.getElementById('qingxuanze').style.display='none';
						document.getElementById('maopao').src='首页/img/4.1.png'
						setTimeout(function() {
							document.getElementById('maopao').style.display='block'
							document.getElementById('renwu').src='首页/img/R5.png'
						}, 1000)
						setTimeout(function() {
							document.getElementById('again').style.display='block'
						}, 1500);
						key++;
					}else if(key==10){
						document.getElementById('xz').style.display='none';
						document.getElementById('qingxuanze').style.display='none';
						document.getElementById('maopao').src='首页/img/5.1.png'
						setTimeout(function() {
							document.getElementById('maopao').style.display='block'
							document.getElementById('renwu').src='首页/img/R5.png'
						}, 1000)
						setTimeout(function() {
							document.getElementById('again').style.display='block'
						}, 1500);
						key++;
					}else if(key==13){
						document.getElementById('xz').style.display='none';
						document.getElementById('qingxuanze').style.display='none';
						document.getElementById('maopao').src='首页/img/6.1.png'
						setTimeout(function() {
							document.getElementById('maopao').style.display='block'
							document.getElementById('renwu').src='首页/img/R5.png'
						}, 1000)
						setTimeout(function() {
							document.getElementById('again').style.display='block'
						}, 1500);
						key++;
					}else if(key==16){
						document.getElementById('xz').style.display='none';
						document.getElementById('qingxuanze').style.display='none';
						document.getElementById('maopao').src='首页/img/7.1.png'
						setTimeout(function() {
							document.getElementById('maopao').style.display='block'
							document.getElementById('renwu').src='首页/img/R5.png'
						}, 1000)
						setTimeout(function() {
							document.getElementById('again').style.display='block'
						}, 1500);
						key++;
					}
				}
				document.getElementById('xuanze2').onclick=function(){
					if(key==4){
						document.getElementById('xz').style.display='none';
						document.getElementById('qingxuanze').style.display='none';
						document.getElementById('maopao').src='首页/img/3.png';
						document.getElementById('renwu').src='首页/img/R2.png';
						setTimeout(function(){
							document.getElementById('maopao').style.display='block'				
						},1000);
						key++;
					}else if(key==7){
						document.getElementById('xz').style.display='none';
						document.getElementById('qingxuanze').style.display='none';
						document.getElementById('maopao').src='首页/img/4.png'
						setTimeout(function() {
							document.getElementById('maopao').style.display='block'
							document.getElementById('renwu').src='首页/img/R6.png'
						}, 1000)
						key++;
					}else if(key==10){
						document.getElementById('xz').style.display='none';
						document.getElementById('qingxuanze').style.display='none';
						document.getElementById('maopao').src='首页/img/5.png'
						setTimeout(function() {
							document.getElementById('maopao').style.display='block'
							document.getElementById('renwu').src='首页/img/R6.png'
						}, 1000)
						key++;
					}else if(key==13){
						document.getElementById('xz').style.display='none';
						document.getElementById('qingxuanze').style.display='none';
						document.getElementById('maopao').src='首页/img/6.png'
						setTimeout(function() {
							document.getElementById('maopao').style.display='block'
							document.getElementById('renwu').src='首页/img/R6.png'
						}, 1000)
						key++;
					}else if(key==16){
						document.getElementById('xz').style.display='none';
						document.getElementById('qingxuanze').style.display='none';
						document.getElementById('maopao').src='首页/img/7.png'
						setTimeout(function() {
							document.getElementById('maopao').style.display='block'
							document.getElementById('renwu').src='首页/img/R6.png'
						}, 1000)
						setTimeout(function() {
							document.getElementById('zuihou').style.display='block'
						}, 1500)
						key++;
					}
				}
				document.getElementById('again').onclick=function(){
					location.reload();
				}
				document.getElementById('xiaoyouxi').onclick=function(){
					window.location.href='贪吃蛇.html'
				}
				document.getElementById('xiaotiesi').onclick=function(){
					document.getElementById('xts').style.display='block'
				}
				document.getElementById('cc').onclick=function(){
					document.getElementById('xts').style.display='none'
				}
				document.getElementById('xiajie').onclick=function(){
					window.location.href='jiaohushi.html'
				}
			})
		</script>
	</body>
</html>